<!doctype html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>{{ page.title }} - Alluxio Documentation</title>
  <meta name="description" content="">

  <link rel="stylesheet" href="{{site.baseurl}}/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
    crossorigin="anonymous">
  <link rel="stylesheet" href="{{site.baseurl}}/css/pygments-default.css">
  <link rel="stylesheet" href="{{site.baseurl}}/css/main.css">

  <script>
    (function (i, s, o, g, r, a, m) {
      i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
        (i[r].q = i[r].q || []).push(arguments)
      }, i[r].l = 1 * new Date(); a = s.createElement(o),
        m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
    ga('create', 'UA-47563775-2', 'alluxio.org');
    ga('send', 'pageview');
  </script>
</head>

<body>
  <!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade
    your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install
    Google Chrome Frame</a> to better experience this site.</p>
<![endif]-->

  <div class="container">
    <div class="row">
      <div class="col-md-2" id="nav_elements">
        <div class="sticky-top">
        <ul class="nav nav-pills flex-column">
          <!-- Generate the language selector at the top of the navigation bar -->
          {% assign multiLanguagePages = site.pages | where:'name',page.name | sort:'languagePriority' %}
          <li class="nav-item">
            <div class="dropdown">
              <button class="btn dropdown-toggle active" type="button" id="LANGUAGE" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                {{page.languageName}}
              </button>
              <div class="dropdown-menu" aria-labelledby="LANGUAGE">
                {% for singleLanguage in multiLanguagePages %}
                <a href="{{site.baseurl}}{{singleLanguage.url}}" class="dropdown-item">{{singleLanguage.languageName}}</a>
                {% endfor %}
              </div>
            </div>
          </li>
          {% case page.lang %}
            {% when 'cn' %}
              {% assign menuName = 'menu-cn' %}
            {% else %}
              {% assign menuName = 'menu-en' %}
          {% endcase %}

          {% assign maps = site.data[menuName] %}
          {% include sitemap.html map= maps%}
        </ul>
      </div>
      </div>

      <div class="col-8" id="content">
        <h1 class="title">{{ page.title }}</h1>
        {{ content }}
      </div>
      <div class = "col-2" id="tableOfContent" >
        <div class = "sticky-top">
        {% include toc.html html=content %}
        </div>
      </div>

    </div>
    <div class="row">
      <footer class="row" style="text-align: center; vertical-align: middle; color: #999;">
        <hr>
        <p>© Copyright 2016 Alluxio Open Foundation. All rights reserved.</p>
      </footer>
    </div>
  </div>
  <!-- /container -->

  <script src="{{site.baseurl}}/js/vendor/jquery-3.3.1.min.js"></script>
  <script src="{{site.baseurl}}/js/vendor/popper.min.js"></script>
  <script src="{{site.baseurl}}/js/vendor/bootstrap.min.js"></script>
  <script src="{{site.baseurl}}/js/main.js"></script>

</body>

</html>
